import { Fragment } from '@/components/Fragment'; 
import { GridDemo } from './demo';
import {
  DefaultGridExample,
  GridResponsiveExample,
  GridRowAndColumnSpanExample,
} from './examples';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';

Grid provides a CSS Grid container with style `display: grid`. Any Amplify UI components can be used as grid item children. To learn how to use CSS Grid properties, see the following documentation:

- [Grid layout - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
- [A Complete Guide to Grid - CSS Tricks](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)

## Demo

This demo shows how to create a basic layout using the Grid primitive.

<GridDemo />

## Usage

Import the Grid primitive. Use any primitive as grid item child components.

<Example>
  <DefaultGridExample />
  <ExampleCode>
    ```tsx file=./examples/DefaultGridExample.tsx 
    
    ```

  </ExampleCode>

</Example>

### Mapping Grid CSS properties to Grid props

We've shortened some of the names of the CSS properties for a cleaner prop API. See the following list prop names (CSS => Grid props):

#### Grid container:

- `grid-auto-columns` => `autoColumns`
- `grid-auto-flow` => `autoFlow`
- `grid-template-areas` => `templateAreas`
- `grid-template-columns` => `templateColumns`
- `grid-template-rows` => `templateRows`
- `column-gap` => `columnGap`
- `row-gap` => `rowGrap`
- `gap` => `gap`
- `align-items` => `alignItems`
- `align-content` => `alignContent`
- `justify-content` => `justifyContent`

#### Grid items <sup>\*</sup>:

- `grid-area` => `area`
- `grid-column` => `column`
- `grid-column-start` => `columnStart`
- `grid-column-end` => `columnEnd`
- `grid-row` => `row`
- `grid-row-start` => `rowStart`
- `grid-row-end` => `rowEnd`

<sup>*</sup>Note: `rowSpan` and `columnSpan` grid item props are transformed to
`row` and `column` span rules.

### Row and column span

Use the `rowSpan` or `columnSpan` props to stretch a grid item across multiple rows or columns. Available values are any integer value or `auto`.
While `rowSpan` and `columnSpan` do not map to CSS properties, they are transformed to `row` and `column` style rules.

<Example>
  <GridRowAndColumnSpanExample />
  <ExampleCode>
    ```tsx file=./examples/GridRowAndColumnSpanExample.tsx

    ```

  </ExampleCode>
</Example>

### Responsive layouts

Use array or object syntax to dynamically change layout based on screen size. Resize browser to see example below.

See [responsive design](/theming/responsive) for more details.

<Example>
  <GridResponsiveExample />
  <ExampleCode>
    ```tsx file=./examples/GridResponsiveExample.tsx

    ```

  </ExampleCode>
</Example>

## CSS Styling

### Target classes

<ComponentStyleDisplay componentName="Grid" />